<template>
  <div class='page' :style="'--pageH:' + (100 * pageImporInfo.proportion[1] / pageImporInfo.proportion[0]) + 'vw'"
    @keydown.enter="handleEnter">
    <div class="scan_code"
      :style="'--code-size:' + 100 * pageImporInfo.proportion[1] / pageImporInfo.proportion[0] * 0.6 + 'vw'">
      <img src="https://retailcos.umaysports.cn/uploads/mall1/20240226/7b69a1f409c5c30caecdb2432a8baa28.jpg" alt=""
        class="code_img">
      <div class="scan_code_text">溧水开运池</div>
    </div>
    <div class="message_area" id="container">
      <div v-for="barrage in barrages" :id="barrage.id" :style="`top:${barrage.track.offset}px;`"
        @animationend="done(barrage)" :key="barrage.id" class="barrage-item bullot-auto">
        <div class="header_area" :style="`background-color:${barrage.bgColor}`">
          <img class="avatar" :src="barrage.icon" />
          <span>{{ barrage.name }}</span>
        </div>
        <div class="content_text" :style="`border:1px solid ${barrage.bgColor}`">{{ barrage.text }}</div>
      </div>
    </div>
    <!-- <el-button type="primary" @click="jumpCarousel" class="btns_style">跳转赞助轮播</el-button> -->
  </div>
</template>

<script>
import { messageList } from '../api/request'
//弹幕类
class Bullot {
  text = ''
  name = ''
  icon = ''
  id
  seep
  track
  bgColor
  status = 'waiting'
  constructor() {
    let colorList = ['#79ad31', '#dfc634', '#51aac4', '#d25820']
    this.id = new Date().getTime()
    this.seep = getRandom(5, 9)
    this.bgColor = colorList[getRandom(0, 3)]
  }
}
//轨道类
class Track {
  offset = 0
  disabled = false
}
class pageImporInfo {
  proportion = [10, 1]
  innerWidth = window.innerWidth
  innerHeight = window.innerHeight
}
const trackHeight = (new pageImporInfo().innerWidth * new pageImporInfo().proportion[1] / new pageImporInfo().proportion[0]) / 2
const trackCount = 2

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}
export default {
  data() {
    return {
      barrages: [],
      page: 1,
      page_size: 10,
      tracks: [],
      timer: '',
      messageInfo: {
        remainder: 0,//余数
        integer: 0,//整数
        total: 0,//总数
        list: [],//数组
      },
      num: 0,
      status: false,
      innerWidth: 0, //当前屏幕宽
      innerHeight: 0,//当前屏幕高
      proportion: [],
      pageImporInfo: {
        proportion: [],
        innerWidth: 0,
        innerHeight: 0
      },
    };
  },
  mounted() {
    //轨道数组
    for (let i = 0; i < trackCount; i++) {
      let track = new Track()
      track.offset = i * trackHeight + 5
      this.tracks.push(track)
    }
    this.pageImporInfo = new pageImporInfo()
    this.getMessageList()
  },
  methods: {
    jumpCarousel() {
      this.$router.push({
        path: '/Carousel'
      })
    },
    //获取弹幕消息
    getMessageList() {
      messageList({ r: 'api/jiujiang/wish/message-list', _mall_id: '1', event_id: '57', page: this.page, page_size: this.page_size }).then(res => {
        let messageInfo = {
          remainder: res.total % this.page_size,
          integer: Math.ceil(res.total / this.page_size),
          total: res.total,
          list: res.data
        }
        this.messageInfo = messageInfo
        if (res.total > 0 && !this.status) {
          this.generateBarrages()
        } else if (res.total <= 0) {
          setTimeout(() => {
            this.getMessageList()
          }, 5000);
        }
      })
    },
    add(i, num, flag) {
      if (this.timer != '') {
        return
      }
      let bullot = new Bullot()
      try {
        bullot.text = this.messageInfo.list[num].content
        bullot.icon = this.messageInfo.list[num].userInfo.avatar
        bullot.name = this.messageInfo.list[num].userInfo.nickname
        bullot.track = this.tracks[i]
        this.barrages.push(bullot)
      } catch {
        this.timer = setTimeout(() => {
          this.page = 1
          this.getMessageList()
          this.num = 0
          this.timer = ''
        }, 4000)
      }
      if (flag) {
        if ((num + 1) < this.messageInfo.remainder) {
          this.num++
        } else {
          if (this.timer != '') {
            return
          }
          this.timer = setTimeout(() => {
            this.page = 1
            this.getMessageList()
            this.num = 0
            this.timer = ''
          }, 4000)
        }
      } else { //下一页
        if ((num + 1) < this.page_size) {
          this.num++
        } else {
          this.num = 0
          this.page = this.page + 1
          this.getMessageList()
        }
      }
    },
    generateBarrages() {
      this.status = true
      setInterval(() => {
        for (let i = 0; i < trackCount; i++) {
          let track = this.tracks[i]
          if (!track.disabled) {
            if (this.page < this.messageInfo.integer) {//满数据
              this.add(i, this.num, false)
            } else if (this.page = this.messageInfo.integer && this.messageInfo.remainder > 0) { //有余数
              this.add(i, this.num, true)
            } else if (this.page = this.messageInfo.integer && this.messageInfo.remainder <= 0) {//最后一页为满数据
              this.add(i, this.num, true)
            }
            this.$nextTick(() => {
              this.run()
            })
            break
          }
        }
      }, 800)
    },
    run() {
      this.barrages.forEach(bullot => {
        try {
          if (bullot.status == 'waiting') {
            bullot.status = 'running'
            bullot.track.disabled = true
            let w1 = document.getElementById('container').getBoundingClientRect().width
            let w2 = document.getElementById(bullot.id).getBoundingClientRect().width
            const delay = (w2 / (w1 + w2)) * 18 * 1000
            setTimeout(() => {
              bullot.track.disabled = false
            }, delay);
          }
        } catch {

        }
      })
    },
    done(bullot) {
      bullot.status = 'done'
      this.$nextTick(() => {
        const index = this.barrages.indexOf(bullot)
        if (index > -1) {
          this.barrages.splice(index, 1)
        }
      })
    }
  },
};
</script>

<style scoped>
.btns_style {
  position: absolute;
  top: 400px;
  left: 100px;
}

.bullot-auto {
  animation: bullot-ani 18s linear 1;
  animation-fill-mode: forwards;
  position: absolute;
}

.barrage-item {
  color: #fff;
  text-align: left;
}

@keyframes bullot-ani {
  from {
    left: 100%;
  }

  to {
    left: 0;
    transform: translate3d(-100%, 0, 0);
  }
}


.page {
  width: 100vw;
  height: var(--pageH);
  background: url("https://retailcos.umaysports.cn/uploads/mall1/20240226/d697420799c3508aa59593309222a7e7.jpg");
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 100% auto;
  margin: 0px 0;
  display: flex;
  /* flex-direction: column;
  justify-content: center; */
}

.scan_code {
  width: var(--pageH);
  height: var(--pageH);
  /* width: calc(100vw - 30px); */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /* position: absolute;
  bottom: 30px;
  right: 30px; */
}

.code_img {
  width: var(--code-size);
  height: var(--code-size);
  border-radius: 12px;
  background-color: #fff;
  /* margin-bottom: -10px; */
}

.scan_code_text {
  font-size: 18px;
  color: #fff;
  margin-top: 20px;
  width: var(--code-size);
  text-align: center;
}

.message_area {
  width: 80vw;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.header_area {
  padding: 0 16px 0 0;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  display: inline-flex;
  border-radius: 50vh;
  white-space: nowrap;
}

.header_area span {
  flex: 1;
  align-items: center;
  font-size: 16px;
  justify-content: center;
  margin-left: 10px;
  display: flex;
}

.avatar {
  width: 2.4vw;
  height: 2.4vw;
  border: 1px solid #fff;
  border-radius: 50%;
  display: inline-block;
}

.content_text {
  padding: 4px 18px;
  border-radius: 50px;
  color: #fff;
  font-size: 20px;
  white-space: nowrap;
  margin: 0 0 0 16px;
  display: block;
}
</style>